import { View, Text, Image } from '@tarojs/components'
import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'

const Random = () => {
  const [currentFood, setCurrentFood] = useState(null)
  const [isAnimating, setIsAnimating] = useState(false)

  // 模拟食物数据
  const foodList = [
    {
      id: '1',
      name: '香辣牛肉面',
      price: 28,
      rating: 4.5,
      ratingCount: 328,
      distance: '500m',
      image: 'https://example.com/noodles.jpg',
      description: '选用上等牛肉，配以秘制汤底，口感鲜美'
    },
    {
      id: '2',
      name: '黑椒牛排',
      price: 68,
      rating: 4.7,
      ratingCount: 256,
      distance: '800m',
      image: 'https://example.com/steak.jpg',
      description: '澳洲进口牛排，搭配黑椒酱汁'
    },
    {
      id: '3',
      name: '日式拉面',
      price: 32,
      rating: 4.6,
      ratingCount: 425,
      distance: '600m',
      image: 'https://example.com/ramen.jpg',
      description: '正宗日式豚骨汤底，配以溏心蛋'
    }
  ]

  // 随机选择一个食物
  const getRandomFood = () => {
    const randomIndex = Math.floor(Math.random() * foodList.length)
    return foodList[randomIndex]
  }

  // 处理拒绝按钮点击
  const handleReject = () => {
    if (isAnimating) return
    setIsAnimating(true)
    setTimeout(() => {
      setCurrentFood(getRandomFood())
      setIsAnimating(false)
    }, 500)
  }

  // 处理接受按钮点击
  const handleAccept = () => {
    if (!currentFood) return
    Taro.navigateTo({
      url: `/pages/detail/index?id=${currentFood.id}`
    })
  }

  // 页面加载时自动随机一个食物
  useEffect(() => {
    setCurrentFood(getRandomFood())
  }, [])

  return (
    <View className='random'>
      <View className='random__header'>
        <Text className='random__title'>随机推荐</Text>
      </View>

      {currentFood ? (
        <View className={`random__content ${isAnimating ? 'random__content--animate' : ''}`}>
          <View className='random__food'>
            <Image className='random__image' src={currentFood.image} mode='aspectFill' />
            <View className='random__info'>
              <Text className='random__name'>{currentFood.name}</Text>
              <View className='random__meta'>
                <View className='random__rating'>
                  <Text className='fa-solid fa-star' />
                  <Text>{currentFood.rating}</Text>
                  <Text className='random__rating-count'>({currentFood.ratingCount})</Text>
                </View>
                <Text className='random__price'>¥{currentFood.price}</Text>
                <View className='random__distance'>
                  <Text className='fa-solid fa-location-dot' />
                  <Text>{currentFood.distance}</Text>
                </View>
              </View>
              <Text className='random__description'>{currentFood.description}</Text>
            </View>
          </View>

          <View className='random__actions'>
            <View className='random__button random__button--reject' onClick={handleReject}>
              <Text className='fa-solid fa-xmark random__button-icon' />
            </View>
            <View className='random__button random__button--accept' onClick={handleAccept}>
              <Text className='fa-solid fa-check random__button-icon' />
            </View>
          </View>
        </View>
      ) : (
        <View className='random__empty'>
          <Text className='fa-solid fa-bowl-food random__empty-icon' />
          <Text className='random__empty-text'>正在为您挑选美食...</Text>
        </View>
      )}
    </View>
  )
}

export default Random 